<template>
  <div class="todo-list">
    <div class="header">
      <input placeholder="TodoList" @keyup.enter="addTodo"/>
    </div>
    <div class="content">
      <ul>
        <li class="toggleAllWarper">
          <input id="toggleAll" type="checkbox" @change="toggleSelectAll"/>
          <label for="toggleAll">
            <svg-icon iconClass="correct"></svg-icon>
          </label>
        </li>
        <todo-item v-for="(todo, index) in filteredTodos" :todo="todo" :key="index" @edit="editTodo" @delete="delTodo" @toggle="toggleTodo"></todo-item>
      </ul>
    </div>
    <div class="footer">
      <span class="itemsLeft">{{remaining}} {{remaining | plur("item")}} left</span>
      <a v-for="(val, filter) in filters" :class="status == filter ? 'selected' : ''" @click.prevent ="status = filter">{{filter | capitalize}}</a>
    </div>
  </div>
</template>

<script>
    const defaultList = [
      { text: 'star this repository', done: false },
      { text: 'fork this repository', done: false },
      { text: 'follow author', done: false },
      { text: 'vue-element-admin', done: true },
      { text: 'vue', done: true },
      { text: 'element-ui', done: true },
      { text: 'axios', done: true },
      { text: 'webpack', done: true }
    ]
    const filters = {
      all: function (todos) {
        return todos
      },
      active: function (todos) {
        return todos.filter(item=> !item.done)
      },
      completed: function (todos) {
        return todos.filter(item => item.done)
      }
    }

    import todoItem from './todoItem'
    export default {
        name: "transactionTable",
        components: { todoItem },
        data: function () {
          return {
            todos: defaultList,
            filters: filters,
            status: 'all'
          }
        },
        computed: {
          filteredTodos: function () {
            return filters[this.status](this.todos)
          },
          remaining: function () {
            return this.todos.filter(todo => !todo.done).length
          }
        },
        methods: {
          toggleSelectAll: function(event){
            this.todos.forEach(todo=>{
              todo.done = event.target.checked
            })
          },
          delTodo: function ({todo}) {
            this.todos = this.todos.filter(item=>{
              return item !== todo
            })
          },
          addTodo: function (event) {
            this.todos.unshift({text: event.target.value, done: false})
            event.target.value = ''
          },
          editTodo: function ({todo, text}) {
            todo.text = text
          },
          toggleTodo: function ({todo, checked}) {
            todo.done = checked
          }
        },
        filters: {
          plur: function (n,w) {
            return n > 1 ? w + 's' : w
          },
          capitalize: function (word) {
            return word.slice(0,1).toUpperCase() + word.slice(1)
          }
        }
    }
</script>

<style lang="scss" scoped>
  .todo-list{
    width: 100%;
    background-color: #fff;

    .header{
      padding: 20px 10px 20px 50px;
      /*<!--box-shadow: 0px -5px 10px #888888 inset;-->*/
      background: rgba(0, 0, 0, 0.003);
      box-shadow: inset 0 -2px 1px rgba(0,0,0,0.03);

      input{
        border: none;
        font-size: 18px;
        font-weight: 300;
        color: #4d4d4d;

        width: 100%;
      }
    }
    .content{
      /*reset ul li*/
      ul, li{
        margin: 0;
        padding: 0;
      }
      li{
        list-style: none;
      }
      .toggleAllWarper{
        position: relative;
        input{
          position: absolute;
          left: -999px;

          &:checked + label{
            color: #737373;
          }
        }

        label{
          position: absolute;
          top: -42px;
          left: 20px;
          font-size: 18px;
          font-weight: 300;
          color: #e6e6e6;
        }

      }
    }
    .footer{
      padding: 20px 20px;
      font-size: 14px;
      color: #777;

      box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 8px 0 -3px #f6f6f6, 0 9px 1px -3px rgba(0, 0, 0, 0.2), 0 16px 0 -6px #f6f6f6, 0 17px 2px -6px rgba(0, 0, 0, 0.2);



    span, a{
        display: inline-block;
        padding: 3px 7px;
      }
      a{
        border: 1px solid transparent;
        border-radius: 3px;
      }
      a.selected{
        border-color: rgba(175, 47, 47, 0.2);
      }
      .itemsLeft{
        margin-right: 20px;
      }
    }
  }
</style>
